<template>
  <v-app-bar :elevation="9" class="hhh" rounded>
    <v-row align="center" no-gutters>
      <!-- 猫咪图片与标题的列 -->
      <v-col class="d-flex align-center" cols="auto">
        <img alt="Cat" src="@/assets/cats_walk.jpg" style="max-height: 82px; max-width: 100%; margin-right: 8px;">
        <h1 class="text-center" style="text-align: center;">
          <v-toolbar-title>小动物地图</v-toolbar-title>
        </h1>
      </v-col>

      <v-spacer></v-spacer>

      <v-col cols="auto">
        <v-container class="pa-0">
          <img alt="Cat" src="@/assets/henu.png"
               style="max-height: 70px; max-width: 100%; margin-right: 8px;margin-bottom: -15px;">
        </v-container>
      </v-col>

    </v-row>
  </v-app-bar>
  <br/>

  <div :style="{ backgroundColor: '#Ffffff' }" class="background">
    <div id="MapPage" class="container">
      <div class="map-body">
        <MapBodyComponents @updateload="handleUpdateload"></MapBodyComponents>
      </div>
      <div class="search-list">
        <SearchListComponents @updateItems="handleUpdateItems"/>
        <div class="containerchild">
          <div class="upload-area">
            <UploadComponents></UploadComponents>
          </div>
          <div class="record-area">
            <RecordComponents></RecordComponents>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import SearchListComponents from '../../src/components/Map/SearchListComponents.vue';
import MapBodyComponents from '../../src/components/Map/MapBodyComponents.vue';
import UploadComponents from '../../src/components/Map/UploadComponents.vue';
import RecordComponents from '../../src/components/Map/RecordComponents.vue';
import {ref} from 'vue';
import axios from 'axios'; // 引入axios

const mousex = ref(0);
const mousey = ref(0);

let isHandleUpdateItemsCalled = false;
let isHandleUpdateloadCalled = false;
let catname: string | null = null;

const handleUpdateItems = (items: any) => {
  //console.log(items);
  for (let item of items) {
    if (item.selected === true) {
      console.log(item.text);
      console.log(mousex.value, mousey.value); // 使用响应式变量
      isHandleUpdateItemsCalled = true;
      catname = item.text;
      tryUploadLogic(); // 将 'item' 作为参数传递
    }
  }

};

const handleUpdateload = (x: number, y: number) => {
  mousex.value = x;
  mousey.value = y;
  // 现在 mousex 和 mousey 是响应式的，并在整个组件中可用
  isHandleUpdateloadCalled = true;
  tryUploadLogic();
};

const tryUploadLogic = () => { // 接受 'item' 作为参数
  if (isHandleUpdateItemsCalled && isHandleUpdateloadCalled && catname !== null) {
    axios
      .post("http://47.113.189.87:8080/animals/saveLocation", {
        name: catname,
        latitude: mousex.value,
        longitude: mousey.value
      })
      .then(() => {
        window.location.reload();
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }
};

// 可以定义其他响应式数据或方法
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
  height: 100%; /* Adjust if needed */
  margin-left: -70px;
}

.map-body {
  flex: 3; /* 3 parts out of 5 */
  margin-left: -30px;
  border-radius: 0px;
}

.search-list {
  flex: 2; /* 2 parts out of 5 */
  margin-left: -220px;
}

.containerchild {
  margin-top: 10px;
  display: flex; /* 开启Flexbox布局 */
}

.upload-area {
  margin-left: 160px;
}

.record-area {
  flex: 1; /* 每个子容器都占用等量空间 */
  margin-left: -70px;
}

.line {
  width: 1245px;
  margin-left: -15px;
}

.background {
  width: 1250px;
  margin-left: -40px;
}

.hhh {
  /* weight:1000px; */
  height: 78px
}

.text-center {
  font-size: 6em;
  margin-bottom: -15px;
  margin-left: 430px;
}

.v-app-bar {
  border-radius: 20px;
}
</style>
